<template>
  <div class="content">
    <div class="acDC-title">
      <span>水冷机组</span>
    </div>
    <div class="process-data">
      <div class="process-data-item">
        <p>当前负荷</p>
        <p>0.9kW</p>
      </div>
      <a-divider type="vertical" />
      <div class="process-data-item">
        <p>昨日能耗</p>
        <p>16kWh</p>
      </div>
      <a-divider type="vertical" />
      <div class="process-data-item">
        <p>昨日峰值负荷</p>
        <p>2.1kW</p>
        <p>12:02:55</p>
      </div>
      <a-divider type="vertical" />
      <div class="process-data-item">
        <p>盘管开启数</p>
        <p>76/836台</p>
      </div>
      <a-divider type="vertical" />
      <div class="process-data-item">
        <p>空调箱开启数</p>
        <p>20/78台</p>
      </div>
      <a-divider type="vertical" />
      <div class="process-data-item">
        <p>最不利点温度</p>
        <p>27℃</p>
      </div>
      <a-divider type="vertical" />
      <div class="process-data-item">
        <p>室内平均温度</p>
        <p>23℃</p>
      </div>
      <a-divider type="vertical" />
      <div class="process-data-item">
        <p>室内平均湿度</p>
        <p>65%</p>
      </div>
      <a-divider type="vertical" />
      <div class="process-data-item">
        <p>室外温度</p>
        <p>17℃</p>
      </div>
      <a-divider type="vertical" />
      <div class="process-data-item">
        <p>室外相对湿度</p>
        <p>78%</p>
      </div>
      <a-divider type="vertical" />
      <div class="process-data-item">
        <p>室外大气压</p>
        <p>1020hpa</p>
      </div>
    </div>
    <div class="app-acimg-box">
      <div>
        <div class="process-img">
          <svg id="svgContainer" class="process-svg"></svg>
        </div>
        <div class="process-data2">
          <div class="process-data-item2">
            <span>运行状态</span>
            <span>关机</span>
          </div>
          <div class="process-data-item2">
            <span>告警状态</span>
            <span>正常</span>
          </div>
          <div class="process-data-item2">
            <span>模式</span>
            <span>制冷/节能</span>
          </div>
          <div class="process-data-item2">
            <span>操作</span>
              <div class="button-group">
                <button>开</button><button class="button-active">关</button>              
              </div>
              <select class="item-option">
                <option value="">节能</option>
                <option value="">手动</option>
                <option value="">舒适</option>
                <option value="">智慧</option>
              </select>
            </div>
            <div class="process-data-item2">
              <a class="analysis-btn" href="#">节能情况分析>></a>
            </div>
          </div>
        </div>
        <div class="app-ac-right-data">
          <p class="app-ac-right-data-title">安全运行概况</p>
          <div class="app-ac-right-data-top">
            <ul>
              <li>一级故障：<strong>0</strong>条</li>
              <li>二级故障：<strong>0</strong>条</li>
              <li>三级故障：<strong>12</strong>条</li>
              <li>&emsp;处理中：<strong>0</strong>条</li>
              <li>&emsp;待处理：<strong>0</strong>条</li>
            </ul>
            <div style="flex-grow: 1">
              <table>
                <thead>
                  <tr>
                    <th>名称</th>
                    <th>发生时间</th>
                    <th>状态</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td><a-checkbox></a-checkbox> 温度传感器异常...</td>
                    <td>19-3-12 12:11:12</td>
                    <td>未处理</td>
                  </tr>
                  <tr>
                    <td><a-checkbox checked></a-checkbox> 压力传感器异常...</td>
                    <td>19-3-12 12:11:12</td>
                    <td>未处理</td>
                  </tr>
                  <tr>
                    <td><a-checkbox checked></a-checkbox> 回风温度传感器异常</td>
                    <td>19-3-12 12:11:12</td>
                    <td>未处理</td>
                  </tr>
                  <tr>
                    <td><a-checkbox></a-checkbox> 扩展模块通讯异常...</td>
                    <td>19-3-12 12:11:12</td>
                    <td>处理中</td>
                  </tr>
                  
                </tbody>
                <tfoot><tr><td colspan="3"><button class="more-button">查看更多</button></td></tr></tfoot>
              </table>
            </div>
            
            
          </div>
          <div>
            <p class="app-ac-right-data-title">水冷机组运行趋势(kWh)</p>
            <div class="app-line-form">
              <a-radio-group v-model="chart1TypeValue" size="small" >
                <a-radio-button value="1">主机</a-radio-button>
                <a-radio-button value="2">冷冻水泵</a-radio-button>
                <a-radio-button value="3">冷却水泵</a-radio-button>
                <a-radio-button value="4">冷却塔</a-radio-button>
              </a-radio-group>
              <a-date-picker :defaultValue="moment('2018-09-18')"/>
            </div>
            <div id="chart1"></div>
          </div>
  
        </div>
      </div>
      <div class="app-ac-bottom-data">
        <div class="app-ac-bottom-chart">
          <div class="app-chart-title">
            <span>中央空调子系统能耗占比趋势（kWh）</span>
            <a-range-picker :defaultValue="[moment('2018-09-06'),moment('2018-09-17 ')]"/>
          </div>
          <div id="chart2"></div>
        </div>
        <div class="app-ac-bottom-chart">
          <div class="app-chart-title">
            <span>中央空调子系统能耗占比趋势（kWh）</span>
            <div>
              <a-radio-group v-model="chart3TypeValue" size="small" >
                <a-radio-button value="1"> 日 </a-radio-button>
                <a-radio-button value="2"> 周 </a-radio-button>
                <a-radio-button value="3"> 月 </a-radio-button>
                <a-radio-button value="4"> 年 </a-radio-button>
              </a-radio-group>
              <a-range-picker :defaultValue="[moment('2018-09-06'),moment('2018-09-17 ')]"/>
            </div>
          </div>
          <div id="chart3"></div>
        </div>
      </div>
    </div>
</template>
<script>

import moment from 'moment'
import echarts from 'echarts'
const Snap = require(`imports-loader?this=>window,fix=>module.exports=0!snapsvg/dist/snap.svg.js`);
// import snap from 'snapsvg'
export default {
  name: "hospitalE",
  data() {
    return {
      chartTheme: {},
      chart1TypeValue: '1',
      chart3TypeValue: '1',
      chart1: {
        color: ["#048eff", "#00e7d0", "#3f38ff", "#8e3fff", "#dd00c5"],
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
          show : false , 
          data: ["照明", "空调", "插座"],
          orient: "vertical",
          left: 40,
          top: "center"
        },

        series: [
          {
            name: "开启量",
            type: "pie",
            radius: "55%",
            center: ["60%", "50%"],
            data: [
              { value: 435, name: "照明" },
              { value: 310, name: "插座" },
              { value: 274, name: "空调" }
            ].sort(function(a, b) {
              return a.value - b.value;
            }),
            labelLine: {
              normal: {
                lineStyle: {
                  color: "#414474"
                },
                length: 10,
                length2: 20
              }
            }
          }
        ]
      },
      deviceCount: {
        设备资产总数: 0,
        纳入监管设备数量: 0,
        在线设备数量: 0,
        离线设备数量: 0
      },
      urgentCount: { 不紧急工单: 0, 一般工单: 0, 超急工单: 0 },
      statusCount: { 处理中: 0, 已处理: 0, 待处理: 0 },
      workLog: []
    };
  },
  mounted: function() {
    this.getImgData()
    var chart1 = echarts.init(document.getElementById('chart1'));
    var chart2 = echarts.init(document.getElementById('chart2'));
    var chart3 = echarts.init(document.getElementById('chart3'));
    var option_line = {
      tooltip: {
        trigger: 'axis'
      },
      color: ['#41bafd','#c06ed0','#30ff98','#ffe730'],
      legend: {
        data:['出水温度','室内外温差','主机负荷'],
        bottom: 0,
        textStyle: {
          color: 'rgba(255,255,255,.7)'
        }
      },
      grid: {
        left: '3%',
        right: '4%',
        top: '15%',
        bottom: '10%',
        containLabel: true
      },
      xAxis: {
        type: 'category',
        data: ['1:00', '2:00', '3:00', '4:00', '5:00', '6:00', '7:00'],
        axisLine: {
          lineStyle: {
            color: 'rgba(255,255,255,.7)'
          }
        },
      },
      yAxis: [
        {
          type: 'value',
          name: '温度',
          axisLabel: {
            formatter: '{value} ℃'
          },
          axisLine: {
            lineStyle: {
              color: 'rgba(255,255,255,.7)'
            }
          },
          splitLine: {
            lineStyle: {
              color: 'rgba(255,255,255,.1)'
            }
          }
        },
        {
          type: 'value',
          name: '主机负荷',
          axisLabel: {
            formatter: '{value} kW'
          },
          axisLine: {
            lineStyle: {
              color: 'rgba(255,255,255,.7)'
            }
          },
          splitLine: {
            lineStyle: {
              color: 'rgba(255,255,255,.1)'
            }
          }
        }            
      ],
      series: [{
        name: '出水温度',
        data: [10, 11, 11.2,10.5, 11, 11, 10.8],
        type: 'line',
        symbol: 'circle'
      },{
      data: [ 6, 7, 9, 10, 10, 11, 12],
        name: '室内外温差',
        type: 'line',
        symbol: 'circle'
      },{
      data: [ 42, 43.2, 48, 46, 51, 46, 52],
        yAxisIndex: 1,
        name: '主机负荷',
        type: 'line',
        symbol: 'circle'
      }
      ]
    };
    chart1.setOption(option_line);

    var option = {
      color: ['#41bafd','#c06ed0','#30ff98','#ffe730','#30f6ff'],
      tooltip: {
        trigger: 'axis',
      },
      legend: {
        data:['空调总能耗','主机','冷冻水泵','冷却水泵','冷却塔'],
        bottom: 0,
        textStyle: {
          color: 'rgba(255,255,255,.7)'
        }
      },
      grid: {
        left: '3%',
        right: '4%',
        top: '15%',
        bottom: '10%',
        containLabel: true
      },
      xAxis: [
        {
          type: 'category',
          data: ['9-6周一','9-7周二','9-8周三','9-9周四','9-10周五','9-11周六','9-12周日','9-13周一','9-14周二','9-15周三','9-16周四','9-17周五'],
          axisPointer: {
            type: 'shadow'
          },
          axisLine: {
            lineStyle: {
              color: 'rgba(255,255,255,.7)'
            }
          },
        }
      ],
      yAxis: [
        {
          type: 'value',
          axisLine: {
            lineStyle: {
              color: 'rgba(255,255,255,.7)'
            }
          },
          splitLine: {
            lineStyle: {
              color: 'rgba(255,255,255,.1)'
            }
          }
        }
      ],
      series: [
      
      ]
    };
    var chartData2 = {
      series: [
        {
          name:'空调总能耗',
          type:'bar',
          data:[560, 620, 854, 1501, 1420, 2014, 2340, 2754, 2457, 2204, 2314, 2546]
        },
        {
          name:'主机',
          type:'bar',
          data:[342, 334, 520, 852, 1021, 1430, 1740, 2245, 1845, 1642, 1547, 1489]
        },
        {
          name:'冷冻水泵',
          type:'bar',
          data:[95, 84, 114, 198, 251, 315, 345, 341, 321, 342, 320, 195]
        },
        {
          name:'冷却水泵',
          type:'bar',
          data:[96, 74, 114, 184, 243, 311, 329, 341, 321, 332, 316, 188]
        },
        {
          name:'冷却塔',
          type:'bar',
          data:[20, 21, 24, 23, 24, 31, 32, 34, 32, 33, 31, 18]
        }
      ]
    }
    chart2.setOption(option);
    chart2.setOption(chartData2);
    var chartData3 = {
      legend: {
        data:['空调总能耗','节能量','节能率'],
      },
      yAxis: [
        {
          type: 'value',
          axisLine: {
            lineStyle: {
              color: 'rgba(255,255,255,.7)'
            }
          },
          splitLine: {
            lineStyle: {
              color: 'rgba(255,255,255,.1)'
            }
          }
        },
        {
          type: 'value',
          axisLine: {
            lineStyle: {
              color: 'rgba(255,255,255,.7)'
            }
          },
          splitLine: {
            lineStyle: {
              color: 'rgba(255,255,255,.1)'
            }
          },
          name: '节能率',
          min: 0,
          interval: 10,
          axisLabel: {
            formatter: '{value} %'
          }
        }
      ],
      series: [
        {
          name:'空调总能耗',
          type:'bar',
          data:[560, 620, 854, 1501, 1420, 2014, 2340, 2754, 2457, 2204, 2314, 2546]
        },
        {
          name:'节能量',
          type:'bar',
          data:[342, 334, 520, 852, 1021, 1430, 1740, 2245, 1845, 1642, 1547, 1489]
        },
        {
          name:'节能率',
          yAxisIndex: 1,
          type:'line',
          symbol: 'circle',
          data:[25, 27, 24, 33, 34, 42, 51, 42, 44, 46, 40, 38]
        }
      ]
    }
    chart3.setOption(option);
    chart3.setOption(chartData3);
  },
  methods: {
    moment,
    getImgData: function () {
      var _p = Snap('#svgContainer')
      _p.clear()
      var ff = _p.paper.filter(Snap.filter.shadow(0, 0, 3,'#83c1ff',.75));
      var _def_block = {fill: "#0999fc",stroke:'#cdf4fd',strokeWidth: 2, filter:ff}
      var _def_block2 = { fill: "#ff443c", stroke: '#ff9c92', strokeWidth: 2, filter: ff }
      var _off_block = {fill: "#ccc",stroke:'none'}
      var _def_text = {fill: "#fff"}
      var _def_upline  = {stroke: "#0999ff",  "stroke-width": 4, fill: 'rgba(0,0,0,0)'}
      var _def_downline  = {stroke: "#96f5fe",  "stroke-width": 4,fill: 'rgba(0,0,0,0)'}
      var _def_downline1  = {stroke: "#c796fe",  "stroke-width": 4,fill: 'rgba(0,0,0,0)'}
      var _def_upline1 = { stroke: "#ff443c", "stroke-width": 4, fill: 'rgba(0,0,0,0)' }
      var _def_downline2 = { stroke: "#ff9c92", "stroke-width": 4, fill: 'rgba(0,0,0,0)' }
      var X = 0
      var Y = -30
      var m1 = new Snap.Matrix(1,0,0,1,X,Y)
      _p.transform(m1.toTransformString())
      var path1 = _p.path("M100 200V90 H200 V292 M200 130 H350 M200 210 H350 M200 290 H350 M350 292 V90 H380 V392 M380 130 H580 M380 260 H580 M380 390 H580 M580 392 V90 H610 V292 H750 V90 H780 V140 H800 M610 130 H750 M610 210 H750").attr(_def_upline);
      var path2 = _p.path("M500 170 H630 M500 300 H630 M500 430 H630 M628 170 V430 V400 H1000").attr(_def_downline1);
      var path3 = _p.path("M800 270 H780 V350 H596 V412 V148 M365 150 H595 M365 280 H595 M365 410 H595 M365 148 V430 H100 V200").attr(_def_downline);
      var path4 = _p.path("M880 170 H910 V380 H1000 V400 H1060 V420").attr(_def_upline1);
      var path5 = _p.path("M880 270 H930 V300 V130 H1060 V380 H1000 M930 213 H1060 M930 298 H1060").attr(_def_downline2);
    
      var lqt = _p.rect(20,200,140,140,4).attr(_off_block)
      lqt.node.style.strokeDasharray = 90
      lqt.node.style.strokeDashoffset = lqt.getTotalLength()
      // lqt.addClass('eq-active')
      _p.image("/static/lqt.svg", 80, 240, 32, 32);
      _p.text(80, 290, '冷却塔').attr(_def_text)

      _p.rect(400,100,160,80,4).attr(_off_block)
      _p.image("/static/lxj.svg", 430,90, 100, 100)
      _p.text(460,170, '1#主机').attr(_def_text)
      // _p.text(460,80, '出水温度').attr(_def_text)
      // _p.text(440,95, '设定13℃ 实际15℃').attr(_def_text)

      var zhuji1 = _p.rect(400,230,160,80,4).attr(_off_block)
      var len = zhuji1.getTotalLength()
      zhuji1.node.style.strokeDasharray = 80
      zhuji1.node.style.strokeDashoffset =len
      // zhuji1.addClass('eq-active')

      _p.image("/static/lxj.svg", 430,220, 100, 100);
      _p.text(460,300, '2#主机').attr(_def_text)
      // _p.text(460,210, '出水温度').attr(_def_text)
      // _p.text(440,225, '设定13℃ 实际15℃').attr(_def_text)
      
      _p.rect(400,360,160,80,4).attr(_off_block)
      _p.image("/static/lxj.svg", 430,350, 100, 100);
      _p.text(460,430, '3#主机').attr(_def_text)
      // _p.text(460,340, '出水温度').attr(_def_text)
      // _p.text(440,355, '设定13℃ 实际15℃').attr(_def_text)


      _p.rect(250,100,60,60,4).attr(_off_block)
      _p.image("/static/pump.svg", 270, 115, 24, 24);
      _p.text(265, 150, '冷却泵').attr(_def_text)
      _p.text(265, 115, '45HZ').attr(_def_text)

      _p.rect(250,180,60,60,4).attr(_off_block)
      _p.image("/static/pump.svg", 270, 195, 24, 24);
      _p.text(265, 230, '冷却泵').attr(_def_text)
      _p.text(265, 195, '45HZ').attr(_def_text)

      _p.rect(250,260,60,60,4).attr(_off_block)
      _p.image("/static/pump.svg", 270, 275, 24, 24);
      _p.text(265, 310, '冷却泵').attr(_def_text)
      _p.text(265, 275, '45HZ').attr(_def_text)


      _p.rect(650,100,60,60,4).attr(_off_block)
      _p.image("/static/pump.svg", 670, 115, 24, 24);
      _p.text(665, 150, '冷冻泵').attr(_def_text)
      _p.text(665, 115, '45HZ').attr(_def_text)

      _p.rect(650,180,60,60,4).attr(_off_block)
      _p.image("/static/pump.svg", 670, 195, 24, 24);
      _p.text(665, 230, '冷冻泵').attr(_def_text)
      _p.text(665, 195, '45HZ').attr(_def_text)

      _p.rect(650,260,60,60,4).attr(_off_block)
      _p.image("/static/pump.svg", 670, 275, 24, 24);
      _p.text(665, 310, '冷冻泵').attr(_def_text)
      _p.text(665, 275, '45HZ').attr(_def_text)
    
      _p.rect(800,100,80,80,4).attr(_def_block)
      _p.image("/static/fsq.svg", 820,110, 48, 48);
      _p.text(826,166, '分水器').attr(_def_text)

      _p.rect(800,230,80,80,4).attr(_def_block)
      _p.image("/static/jsq.svg", 820,240, 48, 48);
      _p.text(826,296, '集水器').attr(_def_text)

      _p.rect(800,360,80,80,4).attr(_def_block)
      _p.image("/static/fsq.svg", 820,370, 48, 48);
      _p.text(826,426, '分气缸').attr(_def_text)

      _p.rect(950,100,60,60,4).attr(_off_block)
      _p.image("/static/pump.svg", 970, 115, 24, 24);
      _p.text(965, 150, '热水泵').attr(_def_text)
      _p.text(965, 115, '45HZ').attr(_def_text)

      _p.rect(950,180,60,60,4).attr(_off_block)
      _p.image("/static/pump.svg", 970, 195, 24, 24);
      _p.text(965, 230, '热水泵').attr(_def_text)
      _p.text(965, 195, '45HZ').attr(_def_text)

      _p.rect(950,260,60,60,4).attr(_off_block)
      _p.image("/static/pump.svg", 970, 275, 24, 24);
      _p.text(965, 310, '热水泵').attr(_def_text)
      _p.text(965, 275, '45HZ').attr(_def_text)

      _p.rect(950,360,80,80,4).attr(_off_block)
      _p.image("/static/hrq.svg", 976,374, 32, 34);
      _p.text(980,426, '板换').attr(_def_text)

      function drawarr1 (x,y) {
        return [x,y,x+10,y,x+10,y-5,x+20,y+5,x+10,y+15,x+10,y+10,x,y+10]
      }
      function drawarr2 (x,y) {
        return [x,y,x-10,y,x-10,y-5,x-20,y+5,x-10,y+15,x-10,y+10,x,y+10]
      }
      _p.polygon(drawarr2(150,70)).attr({fill:'#54d8ff',stroke: 'none'})
      _p.text(150,80,'28.6℃').attr(_def_text)
      _p.polygon(drawarr1(695,70)).attr({fill:'#54d8ff',stroke: 'none'})
      _p.text(650,80,'39.8℃').attr(_def_text)
      _p.polygon(drawarr2(680,330)).attr({fill:'#54d8ff',stroke: 'none'})
      _p.text(680,340,'39.8℃').attr(_def_text)
      _p.polygon(drawarr1(250,410)).attr({fill:'#54d8ff',stroke: 'none'})
      _p.text(205,420,'28.1℃').attr(_def_text)
      _p.polygon(drawarr1(935,90)).attr({fill:'#54d8ff',stroke: 'none'})
      _p.text(890,100,'36.8℃').attr(_def_text)
      _p.polygon(drawarr2(930,350)).attr({fill:'#54d8ff',stroke: 'none'})
      _p.text(930,360,'37.9℃').attr(_def_text)
    }
  },
  computed: {
    allWorkOrderCount: function() {
      let count = 0;
      if (this.statusCount)
        for (let key in this.statusCount) count += this.statusCount[key];
      return count;
    }
  }
};
</script>
<style scoped>
/* @import '../../../style/antd.css'; */
.echarts {
  height: 250px;
  width: 100%;
}
.content {
  font-family: 'PingFang SC', 'Microsoft YaHei';
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #fff;
  background-image: linear-gradient(rgb(17, 15, 46), rgb(28, 30, 84), rgb(15, 15, 45));
  min-height: 100vh;
  padding: 20px; 
}
.app-acimg-box {
  display: flex;
  align-items: center;
}
ACsysimg {
  flex-grow: 0;
}
.app-ac-right-data {
  min-width: 400px;
  flex-grow: 1;
  padding-left: 20px;
}
.app-ac-right-data-top {
  display: flex;
}
.app-ac-right-data-top > ul {
  list-style: none;
  margin: 0;
  padding: 0 10px 0 0;
  border-right: 1px solid #fff;
}
.app-ac-right-data-top li {
  text-align: left;
  width: 160px;
  padding: 5px 0;
}
.app-ac-right-data-top li > strong {
  display: inline-block;
  text-align: center;
  width: 60px;
  font-size: 16px;
  color: #ff2a2a;
}
.app-ac-right-data-top table {
  width: 100%;
}
.app-ac-right-data-top table > tbody  td {
  padding: 4px 0;
}
.app-ac-right-data-top table > tbody > tr> td:first-child {
  text-align: left;
  padding-left: 10px;
}
.app-ac-right-data-title {
  margin: 0;
  padding: 15px 0 5px 0;
  font-size: 16px;
  color: aqua;
  border-bottom: 1px solid aqua;
}
tfoot td {
  text-align: center;
}
.more-button {
  background-color: transparent!important;
  color: #fff!important;
  border: 2px solid rgba(0, 255, 255, 0.63);
  padding: 0 8px;
  border-radius: 50px;
}
.ant-checkbox-inner {
  border-color: aqua!important;
  background-color: transparent!important;
}
.ant-radio-button-wrapper {
  background-color: transparent!important;
  font-size: 12px!important;
}
.ant-radio-button + span {
  color: #fff!important;
}
.ant-radio-button + span:hover {
  color: aqua!important;
}
.ant-radio-button-wrapper-checked > span:last-child {
  color: aqua!important;
}
.ant-radio-button-wrapper-checked:active, .ant-radio-button-wrapper-checked, .ant-radio-button-wrapper-checked::before {
  border-color: aqua!important;
}
.ant-radio-button-wrapper-checked {
  -webkit-box-shadow: -1px 0 0 0 aqua!important;
  box-shadow: -1px 0 0 0 aqua!important;
}
.ant-radio-group {
  margin-right: 10px!important;
}
.ant-calendar-picker-input, .ant-calendar-picker-input {
  height: 24px!important;
  color: aqua!important;
  border-color: aqua!important;
  background-color: transparent!important;
  padding: 0 0 0 2px!important;
}
i.ant-calendar-picker-icon, span.ant-calendar-range-picker-separator {
  color: aqua!important;
}
.app-line-form {
  padding-top: 10px;
  display: flex;
  justify-content: space-between;
}
#chart1 {
  width: 100%;
  min-height: 260px;
}
.app-ac-bottom-data {
  max-height: 290px;
  display: flex;
  justify-content: space-between;
}
.app-ac-bottom-chart {
  width: calc(50% - 5px);
  margin-top: 10px;
  flex-grow: 0;
  height: 280px;
  border: solid 1px rgba(0, 255, 255, 0.5);
}
.app-chart-title {
  display: flex;
  justify-content: space-between;
  padding: 10px 10px 0 10px;
}
#chart2, #chart3 {
  width: 100%;
  height: 240px;
}
.acDC-title {
  text-align: center;
}
.acDC-title span {
  display: inline-block;
  position: relative;
  width: 400px;
  height: 36px;
  line-height: 32px;
  color: aqua;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 4px;
}
.acDC-title span::before{
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: 4px;
  background-color: rgba(255, 255, 255, .25);
  transform: scaleY(1.1) perspective(30px) rotateX(3deg);
  transform-origin: bottom;
}
.process-img {
  position: relative;
  margin: 0 auto;  
  width: 1080px;
  min-height: 500px;
  height: 520px;
  overflow: hidden;
  background-size: 900px 500px;
  /* background-image: url('./img/p-img.svg'); */
  background-repeat: no-repeat;
  background-position: bottom center;
}
.process-svg {
  width: 100%;
  height: 550px;
}
.process-data {
  display: flex;
  width: 100%;
  height: 100px;
  margin-top: 20px;
  justify-content: space-around;
  background-color: rgba(255, 255, 255, .2);
}
.process-data2 {
  display: flex;
  width: 100%;
  padding: 20px;
  justify-content: space-around;
  background-color: rgba(255, 255, 255, .2);
}
.process-data-item2 {
  text-align: center;
}
.process-data-item {
  height: inherit;
  width: 214px;
  text-align: center;
}
.process-data-item p:nth-child(1) {
  margin: 10px;
  font-size: 14px;
  color: #fff;
}
.process-data-item p:nth-child(2){
  font-size: 22px;
  font-weight: 700;
  margin: 0;
  color: aqua;
}
.process-data-item p:nth-child(3) {
  margin: 0;
  font-size: 12px;
  color: #ddd;
}
.process-data-item2 span:nth-child(1) {
  text-align: left;
  margin: 15px;
  font-size: 12px;
  color: #fff;
}
.process-data-item2 span:nth-child(2){
  font-size: 22px;
  font-weight: 700;
  margin: 5px 0;
  color: aqua;
}
.button-group {
  display: inline-block;
  vertical-align: top;
  margin-right: 5px;
}
.button-group button {
  border: none;
  background-color: #1a6d8d;
  font-family: 'Microsoft YaHei';
  color: aqua;
  font-size: 14px;
  outline: none;
  width: 40px;
  padding: 5px;
  box-shadow: 2px 2px 4px rgba(0, 30, 49, 0.28);
}
.button-group button:first-child {
  border-radius: 15px 0 0 15px;
}
.button-group button:last-child {
  border-radius: 0 15px 15px 0;
}
.button-group .button-active {
  background-color: aqua;
  color: #1a6d8d;
  box-shadow: 1px 2px 12px rgba(0, 210, 255, 0.3);
}
.item-option {
  padding: 5px 10px;
  border: none;
  background-color: #1a6d8d;
  border-radius: 100px;
  color: aqua;
  font-size: 14px;
  font-family: 'Microsoft YaHei';
  outline: none;
  box-shadow: 2px 2px 4px rgba(0, 30, 49, 0.28);
}
.analysis-btn {
  display: block;
  height: 30px;
  width: 140px;
  line-height: 30px;
  background-color: aqua;
  color: #1a6d8d;
  text-decoration: none;
  border-radius: 15px;
  font-size: 14px;
}
.analysis-btn:hover {
  box-shadow: 1px 2px 12px rgba(0, 210, 255, 0.3);
}   
.environment-data {
  display: flex;
  min-width: 380px;
  border-radius: 4px;
  background-color: rgba(0, 0, 0, .1);
  margin: 10px;
}
.environment-data > div {
  padding: 0  8px;
}
.environment-data > div p:nth-child(1) {
  font-size: 12px;
  color: #fff;
}
.environment-data > div p:nth-child(2) {
  font-size: 16px;
  font-weight: 700;
  color: #00d1fd;
}
.ant-divider-vertical {
  height: 80%;
  top: 10%;
  width: 2px;
  background-color: rgba(6, 251, 251, 0.26);
}
</style>